<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" top="5vh" @close="cancel" :close-on-click-modal="false">
      <div>
        <div class="head m-b">基本信息</div>
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="专家姓名：" prop="talentsName">
                <el-input v-model="form.talentsName" placeholder="请输入" :disabled="isLook" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别：" prop="talentsSex">
                <el-select v-model="form.talentsSex" placeholder="请选择" style="width: 100%;">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="移动电话：" prop="talentsPhone">
                <el-input v-model="form.talentsPhone" placeholder="请输入" :disabled="isLook" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="技术职称：" prop="jobTitle">
                <el-input v-model="form.jobTitle" placeholder="请输入" :disabled="isLook" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="职业方向：" prop="careerDirection">
                <el-input v-model="form.careerDirection" placeholder="请输入" :disabled="isLook" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签：" prop="label">
                <el-input v-model="form.label" placeholder="请输入" :disabled="isLook" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="head m-b">个人经历</div>
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="科研学术兼职情况：" prop="partTimeSituation">
            <el-input type="textarea" :rows="6" v-model="form.talentExperience.partTimeSituation" placeholder="请输入" :disabled="isLook" />
          </el-form-item>
          <el-form-item label="受教育情况：" prop="educationalSituation">
            <el-input type="textarea" :rows="6" v-model="form.talentExperience.educationalSituation" placeholder="请输入" :disabled="isLook" />
          </el-form-item>
          <el-form-item label="主要工作简历：" prop="jobResume">
            <el-input type="textarea" :rows="6" v-model="form.talentExperience.jobResume" placeholder="请输入" :disabled="isLook" />
          </el-form-item>
          <el-form-item label="著作情况：" prop="workSituation">
            <el-input type="textarea" :rows="6" v-model="form.talentExperience.workSituation" placeholder="请输入" :disabled="isLook" />
          </el-form-item>
          <el-form-item label="主要科研成绩：" prop="scienceGrade">
            <el-input type="textarea" :rows="6" v-model="form.talentExperience.scienceGrade" placeholder="请输入" :disabled="isLook" />
          </el-form-item>
          <el-form-item label="专利资料：" prop="patentData">
            <el-input type="textarea" :rows="6" v-model="form.talentExperience.patentData" placeholder="请输入" :disabled="isLook" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { updateTalents } from '@/api/personManage'
// import { addTalents } from '@/api/techTalents'
export default {
  data() {
    return {
      dialogVisible: false,
      accept: '.doc,.docx,.pdf',
      title: '',
      form: {
        bindState: 0,
        talentsName: '',
        jobTitle: '',
        careerDirection: '',
        declareUnitName: '',
        talentsPhone: '',
        label: '',
        talentsSex: '',
        talentExperience: {
          experienceId: '',
          talentsId: '',
          partTimeSituation: '',
          educationalSituation: '',
          jobResume: '',
          workSituation: '',
          scienceGrade: '',
          patentData: ''
        }
      },

      rules: {
        talentsSex: [
          {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change']
          }
        ],
        talentsName: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        careerDirection: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        declareUnitName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        jobTitle: [{ required: true, message: '请输入', trigger: 'blur' }],
        talentsPhone: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ]
      },
      isEdit: false,
      isLook: false
    }
  },
  created() { },
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title
      this.isEdit = obj.isEdit
      this.isLook = obj.isLook
      if (obj.title == '修改专家') {
        this.form = {
          bindState: 0,
          talentsName: '张得开',
          jobTitle: '男',
          careerDirection: '',
          declareUnitName: '',
          talentsPhone: '',
          label: '',
          talentsSex: '男',
          talentExperience: {
            experienceId: '',
            talentsId: '',
            partTimeSituation: '',
            educationalSituation: '',
            jobResume: '',
            workSituation: '',
            scienceGrade: '',
            patentData: ''
          }
        }
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            // updateTalents({ ...this.form }).then(res => {
            //   const { code, message } = res
            //   if (code == 200) {
            //     this.dialogVisible = false
            //     this.$emit('close')
            //   } else {
            //     this.$message.error(message)
            //   }
            // })
          } else {
            // addTalents({ ...this.form }).then(res => {
            //   const { code, message } = res
            //   if (code == 200) {
            //     this.dialogVisible = false
            //     this.$emit('close')
            //   } else {
            //     this.$message.error(message)
            //   }
            // })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
  .head {
    border-left: 6px solid #5272ec;
    padding-left: 15px;
    font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
  }
</style>
